<template>
  <page-header-wrapper>
    <a-card :bordered='false' :body-style="{ padding: '0' }" style='margin-top: 10px'>
      <a-row style='margin-top: 20px;margin-left: 20px'>
        <a-col :md='6' :sm='24'>
          <a-input type='primary' v-model='query_param.content' style='width: 200px' placeholder='请输入搜索内容'></a-input>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-button type='primary' @click='query_student'>查询</a-button>
          <a-button type='primary' @click='show_add(true)'>新增</a-button>
        </a-col>
      </a-row>
      <a-row style='margin-top: 20px'>
        <a-table :columns='columns' :data-source='data' bordered>
          <template slot='operation' slot-scope="text, record">
            <a-button type='primary' @click='show_edit(true, record)'>修改</a-button>
            <a-button type='primary' @click='remove_rec(record)'>删除</a-button>

          </template>
          <template slot='course' slot-scope='text, record'>
            <a-button type='primary' @click='show_course(true, record)'>查看</a-button>
          </template>
        </a-table>
      </a-row>

    </a-card>

    <a-modal title='修改' :visible='edit_visible' @ok='edit' @cancel='edit_visible = false'>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label='学号:'>
          <a-input type='primary' v-model=edit_var.stu_num></a-input>
        </a-form-item>
        <a-form-item label='姓名:'>
          <a-input type='primary' v-model=edit_var.stu_name></a-input>
        </a-form-item>
        <a-form-item label='生日:'>
          <a-date-picker @change="editDateChange"/>
        </a-form-item>
        <a-form-item label='地址:'>
          <a-input type='primary' v-model=edit_var.stu_add></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title='添加' :visible='add_visible' @ok='add' @cancel='add_visible = false'>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label='学号:'>
          <a-input type='primary' v-model=add_var.stu_num></a-input>
        </a-form-item>
        <a-form-item label='姓名:'>
          <a-input type='primary' v-model=add_var.stu_name></a-input>
        </a-form-item>
        <a-form-item label='生日:'>
          <a-date-picker @change="addDateChange"/>
        </a-form-item>
        <a-form-item label='地址:'>
          <a-input type='primary' v-model=add_var.stu_add></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title='课程内容' :visible='course_visible' @ok='course_visible = false' @cancel='course_visible = false'>
      <a-row>
        <a-col :span='6'>
          <a-select default-value='选择添加课程' style="width: 120px" @change='course_select'>
            <tag-select-option v-for='d in all_courses' :key='d.id' >
              {{d.name}}
            </tag-select-option>
          </a-select>
        </a-col>
        <a-col :span='4'>
          <a-button type='primary' @click='add_score'>新增</a-button>

        </a-col>
        <a-col :span='4'>
          <a-button type='primary' @click='query_score'>查询</a-button>
        </a-col>
      </a-row>
      <a-table :columns='course_col' :data-source='course_data' bordered>
        <template slot='operation' slot-scope='text, record'>
          <a-button type='primary' @click='edit_score(record)'>修改</a-button>
          <a-button type='primary' @click='delete_score(record)'>删除</a-button>
        </template>
      </a-table>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import BatchBar from '@/components/Charts/BatchBar'
import Pie from '@/components/Charts/Pie'
import OverviewTable from '@/components/Table/OverviewTable'
import OverviewWarning from '@/components/Table/OverviewWarning'
import AssetRiskPie from '@/components/Overview/AssetRiskPie'
import LeakAssetBar from '@/components/Overview/LeakAssetBar'
import LeakAssetGroupBar from '@/components/Overview/LeakAssetGroupBar'
import NotPatchPie from '@/components/Overview/NotPatchPie'
import PatchUpdateCurveline from '@/components/Overview/PatchUpdateCurveline'
import SystemMonitorLine from '@/components/Overview/SystemMonitorLine'
import request from '@/utils/request'
import moment from 'moment'
import TagSelectOption from '@/components/TagSelect/TagSelectOption'

const columns = [
  {
    title: '学号',
    dataIndex: 'stu_num',
    key: 'stu_num',
    width:80,
    scopedSlots: { customRender: 'stu_num' }
  },
  {
    title: '姓名',
    dataIndex: 'stu_name',
    key: 'stu_name',
    width: 150,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '生日',
    dataIndex: 'stu_birth',
    key: 'stu_birth',
    width: 200,
    scopedSlots: { customRender: 'birth' }
  },
  {
    title: '地址',
    dataIndex: 'stu_add',
    key: 'stu_add',
    scopedSlots: { customRender: 'address' }
  },
  {
    title: '操作',
    key: 'operation',
    width:200,
    scopedSlots: { customRender: 'operation' }
  },
  {
    title: '课程',
    key: 'course',
    width:120,
    scopedSlots: { customRender: 'course' }
  }
]

const course_col = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' }
  },
  {
    title: '课程',
    dataIndex: 'c_name',
    key: 'c_name',
    scopedSlots: { customRender: 'c_name' }
  },
  {
    title: '成绩',
    dataIndex: 'score',
    key: 'score',
    scopedSlots: { customRender: 'score' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const data = []
export default {
  name: 'Overview',
  components: {
    TagSelectOption,
    PageHeaderWrapper,
    BatchBar,
    Pie,
    OverviewTable,
    OverviewWarning,
    AssetRiskPie,
    LeakAssetBar,
    LeakAssetGroupBar,
    NotPatchPie,
    PatchUpdateCurveline,
    SystemMonitorLine
  },
  data() {
    return {
      columns,
      course_col,
      data,
      search: '',
      query_param: {
        page: 1,
        content: ''
      },
      has_next: true,
      add_visible: false,
      add_var: {
        stu_num:'',
        stu_name:'',
        stu_birth:moment('2021-04-09', 'YYYY-MM-DD'),
        stu_add:''
      },
      edit_visible: false,
      edit_var: {},
      delete_visible: false,
      delete_var:{},

      //绑定操作
      course_visible: false,
      course_var: {},
      course_data: [],
      all_courses : [],
      select_course: '',

      //修改成绩
      edit_score_visible: false,
      edit_score_var: {}

    }
  },
  methods: {
    moment,
    query_student() {
      let that = this
      request({
        url: 'student/query',
        method: 'post',
        data: this.query_param
      }).then((res) => {
        console.log(res.data.list)
        let arr = []
        for (let i in res.data.list) {
          let d = res.data.list[i].fields
          console.log(d)
          d.id = res.data.list[i]['pk']
          arr.push(d)
        }
        that.data = arr
        console.log('data is ')
        console.log(that.data)
        that.has_next = res.data.has_next
      }).finally()
    },
    addDateChange(date){
      this.add_var.stu_birth = date
    },
    show_add(tag) {
      this.add_visible = tag
    },
    add() {
      request({
        url: 'student/insert',
        method: 'post',
        data: this.add_var
      }).then((res) => {
        if (res.code == 200) {
          alert('添加成功')
        }else {
          alert(res.data.content)
        }
        this.add_var= {
          stu_num:'',
          stu_name:'',
          stu_birth:moment('2021-04-09', 'YYYY-MM-DD'),
          stu_add:''
        }
      }).finally(
        this.add_visible = false
      )
    },
    show_edit(tag, record){
      this.edit_visible = tag
      this.edit_var = record
      console.log(this.edit_var)
      console.log('****************')
    },
    editDateChange(date){
      this.edit_var.stu_birth = date
    },
    edit() {
      console.log('******* edit_var *********')
      console.log(this.edit_var)
      request({
        url: 'student/update',
        method: 'post',
        data: this.edit_var
      }).then((res) => {
        if (res.code == 200) {
          alert('修改成功')
        }
        console.log(res)
      }).finally(
        this.edit_visible = false
      )
    },
    show_remove(tag, record) {
      this.delete_visible = tag
      this.delete_var = record
      request({
        url: 'student/query?',
        method:''
      })
    },
    remove_rec(record) {
      console.log(record)
      console.log('student/delete?id='+ record['id'])
      request({
        url: 'student/delete?id='+ record['id'],
        method:'get'
      }).then((res) => {
        if (res.code == 200) {
          alert('删除成功！')
        }
      })
      console.log(record)
    },
    show_course(tag, record) {
      this.course_visible = tag
      this.course_var = record
      this.query_score()
    },
    query_courses() {
      request({
        url: 'course/queryall',
        method: 'get',
      }).then((res) => {
        if (res.code == 200) {
          this.all_courses = res.data
          console.log('***** all courses ****')
          console.log(this.all_courses)
        }
      })
    },
    course_select(value) {
      console.log('******* course select ******')
      console.log(value)
      this.select_course = value
    },
    query_score() {
      request({
        url: 'score/query',
        method: 'post',
        data: this.course_var
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          let arr = []
          for (let i in res.data) {
            let record = res.data[i]
            arr.push(record)
          }
          this.course_data = arr
        }
      })
    },
    add_score() {
      this.course_var['c_id'] = this.select_course
      console.log(this.course_var)
      request({
        url:'score/bind',
        method: 'post',
        data: this.course_var
      }).then((res) => {
        if (res.code == 200) {
          alert('添加成功！')
        }
      }).finally(
        this.query_score()
      )
    },
    edit_score(record) {
      record['score'] = 100
      console.log(record)
      request({
        url: 'score/update',
        method: 'post',
        data: record
      }).then((res) => {
        alert('修改成功！')
      }).finally(
        this.query_score()
      )
    },
    delete_score(record) {
      request({
        url: `score/unbind?id=${record['id']}`,
        method:'get'
      }).then((res) => {
        alert('删除成功！')
      }).finally(
        this.query_score()
      )
    },

  },
  created() {
    this.query_courses()
  },
  mounted() {
  }
}
</script>

<style scoped>
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  height: 80px;
  border-radius: 5px;
  background: white;
  padding: 5px 0;
}

.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
  margin-bottom: 10px;
}

.gutter-box {
  background: white;
  padding: 5px 0;
  margin-bottom: 10px;
}
</style>
